<template>
  <div class="content">
    <!--    户表昨日用量排名前十-->
    <div class="content-top">
      <div class="content-top-left">
        <span class="active">户表</span>
        <span>区域用水</span>
      </div>
    </div>
    <div class="content-bottom">

    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import Treeselect from "@riophae/vue-treeselect";

export default {
  name: 'AreaDosage',
  components: {Treeselect},
  data() {
    return {
      sheetsCode: null,
      sheetsTreeList: [],

      dataValue: [],
    }
  },
  mounted() {
    this.getTreeList()
  },
  methods: {
    /** 查询区域树 */
    getTreeList() {
      this.treeLoading = true;
      this.sheetsTreeList = JSON.parse(localStorage.getItem('meteredTreeData'))
      if (this.sheetsTreeList.length === 0) {
        this.treeLoading = false;
      } else {
        this.defaultExpandedKeys = [this.sheetsTreeList[0].id];
        this.sheetsTreeList.map(item => {
          this.getLeafKeys(item)
        })
        this.treeLoading = false;
      }
    },
    getLeafKeys(node) {
      //判断是否要禁用的条件
      if (node.deviceType === 0 && node.children.length === 0) {
        node.isDisabled = true
      } else {
        node.isDisabled = false
      }
      node.children.forEach(item => this.getLeafKeys(item))
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: '' + node.sheetsCode,
        label: node.sheetsName,
        children: node.children,
        isDisabled: node.isDisabled
      };
    },
    // 区域下拉框改变触发事件
    handleSheetsChange(node) {
      // this.form.sheetsId = node.id
      this.sheetsCode = node.sheetsCode
    },
  }
}
</script>
<style lang="scss" scoped>
.content-top {
  padding: 0.2rem 0 0.1rem 0.2rem;

  .content-top-left {
    span {
      color: #00d8ff;
      font-size: .22rem;
      font-weight: 520;
      font-family: "Adobe 仿宋 Std R";
      padding: 0 .1rem;
    }

    span:first-child {
      border-right: 0.01rem solid #1950c4;
      padding-left: 0;
    }

    span.active {
      color: #fff;
    }
  }

}

.content-bottom {
  height: 2.6rem;
  //background: red;
}
</style>
